<template>
<div class="app-container clearfix head-content">
  <div class="fl banner-img" @click="backIndex"></div>
  <div class="fr search">
    <div class="search-term">
      <span v-for="(title,index) in searchTitles" 
      :key="index"
      v-text="title"
      :class="{selected: curIndex === index}"
      @click="onSelect(index)"></span>
    </div>
    <div>
      <form @submit.prevent="doSearch(key)">
        <input type="text" v-model="key" class="search-inp"><button type="btn" class="search-btn" @click="doSearch(key)">搜索</button>
      </form>
    </div>
    <div class="hot-search">
      <span>热搜：</span>
      <span class="hot-text" v-for="(hot,index) in hotList" v-text="hot" @click="doSearch(hot)"></span>
    </div>
  </div>
</div>
</template>
<script>
import { apiHotSearch } from '../../common/api'
import { session } from '../../common/util'

export default {
  data() {
    return {
      searchTitles: ['宝贝', '店铺', '品牌'],
      curIndex: (session.get('search-index') || 0),
      hotList: [''],
      key: '',
      param: {
        keyWord: '',
        currentPage: 1,
        searchType: 'goods',
        goodsPro: '',
        showCount: 10,
        gcIdThird: ''
      }
    }
  },
  methods: {
    onSelect(index) {
      this.curIndex = index
    },
    doSearch(key) {
      // 将搜索的关键字保存到session中
      session.set('keyword', key)

      // 保存搜索的类型
      session.set('search-index', this.curIndex)

      switch (this.curIndex) {
        // 当前是商品搜索
        case 0:
          // 设置搜索类型
          this.param.searchType = 'goods'
          // 设置关键词
          this.param.keyWord = key
          // 清空三级类目搜索
          this.param.gcIdThird = ''
          // 商品分类
          this.param.goodsPro = ''
          // 品牌名称
          this.param.brandName = ''
          // 每页展示20条数据
          this.param.showCount = 20
          // 跳转到搜索界面
          this.$router.push('/search/goods')
          break
        // 店铺搜索
        case 1:
          // 店铺搜索
          this.param.searchType = 'store'
          // 清空关键词
          this.param.keyWord = key
          // 清空三级类目搜索
          this.param.gcIdThird = ''
          // 品牌名称
          this.param.brandName = ''
          // 商品分类
          this.param.goodsPro = ''
          // 店铺搜索每页展示10条数据
          this.param.showCount = 10
          // 跳转到店铺搜索页面
          this.$router.push('/search/stores')
          break
        // 当前是品牌搜索
        case 2:
          // 当前是品牌搜索（搜索类型也是goods）
          this.param.searchType = 'goods'
          // 清空关键词
          this.param.keyWord = ''
          // 清空三级类目搜索
          this.param.gcIdThird = ''
          // 品牌名称
          this.param.brandName = key
          // 商品分类
          this.param.goodsPro = ''
          // 每页展示20条数据
          this.param.showCount = 20
          // 跳转到搜索页面
          this.$router.push('/search/goods')
          break
      }

      // 更新数据
      this.$store.commit('updateparam', this.param)

      // 执行查询
      this.$store.dispatch('fetchSerachGoods')
    },
    backIndex() {
      this.$router.replace('/')
    }
  },
  created() {
    // 如果页面刷新了，则保留搜索的结果（在搜索页面）
    if (this.$route.path.indexOf('/search/goods') >= 0) {
      // 如果在搜索页面
      this.key = session.get('keyword')

      // 如果有值，则开始搜索
      if (this.key) {
        // 执行搜索操作
        this.doSearch(this.key)
      }
    }

    // 查询热搜的内容
    apiHotSearch().then(data => {
      this.hotList = data.sysconfig.hotSearchs
    })
  }
}
</script>
<style lang="scss" scoped>
@import '../../scss/_var.scss';
.head-content {
  height: 140px;
  padding-left: 40px;
  .banner-img {
    width: 180px;
    height: 68px;
    background: url('../../assets/logo.png') no-repeat;
    margin-top: 50px;
    margin-bottom: 22px;
    cursor: pointer
  }
  .search {
    margin-top: 34px;
    margin-right: 40px;
    .search-term {
      padding-top: 5px;
      span {
        padding: 3px 14px;
        font-size: 16px;
        color: $color-main;
        cursor: pointer;
        &.selected {
          background-color: $color-main;
          color: $color-white;
        }
      }
    }
    .search-inp {
      width: 360px;
      height: 36px;
      border: 1px solid $color-main;
      border-right: 0px;
      padding: 2px 0px 2px 6px;
    }
    .search-btn {
      width: 120px;
      height: 38px;
      background-color: $color-main;
      color: $color-white;
      font-size: 16px;
    }

    .hot-search {
      padding:6px 0px;
      ont-size: 12px;
      color: $color-gray;
      cursor: pointer;
      .hot-text {
        padding: 0 4px;
        font-size: 12px;
        color: $color-gray;
        cursor: pointer;
        &:hover {
          color: $color-main
        }
      }
    }
  }
}
</style>